<script setup lang="ts">
import { t } from '@/locale'
import { LoginType, useLoginForm, useLoginHandler } from '../composable/useLogin'

interface Props {
  redirectUrl?: string
}

const props = defineProps<Props>()

const { formData, validateForm } = useLoginForm()
const { doAccountLogin } = useLoginHandler()

async function handleAccountLogin() {
  if (!validateForm(LoginType.ACCOUNT)) {
    return
  }

  await doAccountLogin(formData.username, formData.password, props.redirectUrl)
}

function handleAgreeTermsChange(value: boolean) {
  formData.agreeTerms = value
}
</script>

<template>
  <view class="account-login">
    <view class="flex flex-col space-y-4">
      <view class="space-y-4">
        <sar-input
          v-model="formData.username"
          :placeholder="$t('login.placeholder.username')"
          class="w-full"
        />

        <sar-input
          v-model="formData.password"
          type="password"
          :placeholder="$t('login.placeholder.password')"
          class="w-full"
        />
      </view>

      <view class="flex items-center justify-between text-sm">
        <text class="text-blue-500">{{ $t('login.forgot_password') }}</text>
        <text class="text-blue-500">{{ $t('login.register_account') }}</text>
      </view>

      <sar-button
        type="default"
        class="h-12 w-full border-blue-500 bg-blue-500 text-white"
        @click="handleAccountLogin"
      >
        {{ $t('login.login') }}
      </sar-button>

      <view class="flex items-center space-x-2">
        <sar-checkbox
          :model-value="formData.agreeTerms"
          @update:model-value="handleAgreeTermsChange"
        />
        <text class="text-sm text-gray-600">
          {{ $t('login.agree_terms') }}
          <text class="text-blue-500">{{ $t('login.user_agreement') }}</text>
          {{ $t('login.and') }}
          <text class="text-blue-500">{{ $t('login.privacy_policy') }}</text>
        </text>
      </view>
    </view>
  </view>
</template>

<style scoped>
.account-login {
}
</style>
